@import "common";

body {
  min-width: 320px;
  margin: 0 auto;
  width: 15rem;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  z-index: 0;
  background-image: linear-gradient(60deg, #f39596, #f38789, #f16669);

}

* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

@keyframes moveuser {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes leaveuser {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.user {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  z-index: 999;
  width: 13.4rem;
  height: 100vh;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  background: url("../images/user-bg.png") no-repeat;
  background-size: cover;
  //animation: moveuser .6s linear forwards;
  .back {

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;

    width: 1.8rem;
    height: 1.8rem;
    background: url("../images/back.png") no-repeat;
    background-size: 1.8rem 1.8rem;
  }

  .user-info {
    display: flex;
    flex-direction: column;

    width: 9rem;
    height: 20rem;
    margin-right: 2rem;
    //margin: 1.2rem auto;
    .tou {
      width: 3rem;
      height: 3rem;


      img {
        width: 100%;
        height: 100%;
      }
    }

    .username {
      font-size: 0.7rem;
      font-family: Helvetica;
      margin: 0.6rem 0;
    }

    .list {
      ul {
        display: flex;
        flex-direction: column;

        margin: 0.5rem 0;

        li {
          list-style: none;
          width: 8rem;
          height: 1.5rem;


          a {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 100%;

            .ico {
              width: 0.7rem;
              height: 0.7rem;

              img {
                width: 100%;
                height: 100%;

              }
            }

            .text {
              width: 50%;
              font-size: 0.5rem;
              color: black;
              font-family: 黑体;
              line-height: 1.5rem;
              vertical-align: middle;
            }

            .point {
              width: 20%;
              font-size: 1rem;
              color: #797979;
              line-height: 1.5rem;
            }

          }
        }
      }
    }
  }
}

/*背景遮罩*/
.content2 {
  position: fixed;
  top:0;
  left: 0;
  display: none;
  background-color: black;

  width: 100%;
  opacity: .5;
  z-index: 998;
}

/*导航栏模块*/
nav {
  display: flex;
  justify-content: space-between;
  width: 15rem;
  height: 1.32rem;
  padding: 0.2rem 0;
  position: fixed;
  top: 0;
  background-color: #e9787a;
  opacity: .8;
  z-index: 995;


  .menu {
    width: 0.7rem;
    height: 0.7rem;
    margin: 0.3rem 0.8rem 0.2rem 0.3rem;
    background: url("../images/menu.png") no-repeat;
    background-size: cover;


  }

  .search {
    width: 0.8rem;
    height: 0.8rem;
    margin: 0.3rem 0.3rem 0.2rem 0.8rem;
    background: url("../images/search.png") no-repeat;
    background-size: cover;

  }

  .dao {
    flex: 1;

    ul {
      display: flex;
      justify-content: flex-start;

      li {
        list-style: none;
        width: 25%;
        height: 1.32rem;

        a {
          display: block;
          height: 1.32rem;
          line-height: 1.32rem;
          text-decoration: none;
          color: white;
          text-align: center;
          font-size: 0.72rem;
        }

        .current {
          font-size: 0.9rem;
        }
      }
    }

  }
}


.main-block {
  width: 15rem;
  padding-top: 2.4rem;
  padding-bottom: 5rem;
}

/*内容主体部分*/
.content {
  /*第一个板块*/

  .my-music {
    width: 13.4rem;
    height: 9.2rem;
    margin: 0rem auto 1.4rem auto;

    border-radius: 0.5rem;
    //background-color: #5bc0de;
    background: linear-gradient(90deg, #c8f8ff, #76d3e1);
    overflow: hidden;


    ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0.5rem 0;

      li {

        width: 11.6rem;
        height: 2rem;

        hr {
          background-color: white;
          height: 1px;
          border: none;
        }

        a {
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;

          width: 100%;
          height: 100%;
          padding: 0.4rem;

          span {
            width: 1rem;
            height: 1rem;

            i {
              height: 1rem;
              line-height: 1rem;
              font-weight: 200;
            }
          }

          p {
            flex: 1;
            height: 1rem;
            line-height: 1rem;
            margin-left: 1rem;
            margin-top: 0.25rem;
            font-size: 0.7rem;
            color: black;
            font-family: 黑体;
          }

          .count {
            display: flex;
            box-sizing: border-box;
            width: 2rem;
            height: 100%;
            padding: 0.3rem 0;
            margin-top: 0.1rem;

            span {
              width: 80%;
              font-size: 0.5rem;
              color: #646a6b;
            }

            i {
              font-size: 0.7rem;
              color: black;
            }
          }

        }

        .none {
          display: none;
        }
      }

    }

  }

  /*第二个模块*/

  .my-list {
    width: 13.4rem;
    height: 18rem;
    margin: 0 auto;
    border-radius: 0.5rem;
    //background-color: #5bc0de;
    background: linear-gradient(90deg, #dabdf9, #ae7ce5);
    overflow: hidden;

    .header {
      width: 12.4rem;
      height: 1rem;
      display: flex;
      justify-content: space-between;
      margin: 0.6rem auto;
      //background-color: #5bc0de;
      .my {
        width: 30%;

        font-size: 0.6rem;


      }

      .hide {
        flex: 1;

        font-size: 0.4rem;
        color: #626262;
        overflow: hidden;

        p {
          margin-top: 0.1rem;
        }
      }

      .right {
        width: 20%;

        display: flex;
        justify-content: flex-start;

        .add {
          width: 0.6rem;
          height: 0.6rem;
          margin: 0rem 0.5rem 0 0.2rem;
          background: url("../images/add.png") no-repeat;
          background-size: cover;
        }

        .menu {
          width: 0.6rem;
          height: 0.6rem;
          margin: 0rem 0 0 0.2rem;
          background: url("../images/newmenu.png") no-repeat;
          background-size: cover;
        }
      }
    }

    ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0.5rem 0;

      li {

        width: 11.6rem;
        height: 2.2rem;
        margin: 0.2rem 0;

        hr {
          background-color: white;
          height: 1px;
          border: none;
        }

        a {
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          display: flex;
          width: 100%;
          height: 100%;
          padding: 0.1rem;

          span {
            width: 1.9rem;
            height: 1.9rem;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .text {
            flex: 1;
            height: 2.2rem;

            margin-top: 0.25rem;
            margin-left: 0.5rem;
            font-family: 黑体;

            .title {
              font-size: 0.7rem;
              color: black;
            }

            .total {
              font-size: 0.4rem;
              color: #646a6b;
              margin: 0;
            }
          }

          .point {
            width: 0.2rem;

            height: 0.8rem;
            margin-top: 0.5rem;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

      }

    }
  }


}

/*推荐模块*/
.suggest {
  .suggest-header {
    width: 100%;
    height: 6.6rem;

    .swiper-container {
      width: 14rem;
      height: 100%;
      margin: 0.4rem auto;

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        width: 9.8rem;
        height: 5.6rem;
        overflow: hidden;
        border-radius: 0.4rem;

        img {
          width: 100%;
          height: 100%;
        }

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        transition: 300ms;
        transform: scale(0.8);

      }

      .swiper-slide-active, .swiper-slide-duplicate-active {
        transform: scale(1);
        z-index: 10;

      }
    }


  }

  .suggest-body {
    width: 100%;
    height: 14rem;
    display: flex;
    flex-direction: column;

    .title {
      width: 100%;
      height: 1rem;

      .tuijian {
        float: left;
        width: 5rem;
        height: 100%;

        p {
          margin-left: 0.4rem;
          font-size: 0.7rem;
          font-weight: 700;
          font-family: heiti;
        }
      }

      .more {
        float: right;
        width: 1.5rem;
        height: 100%;

        display: flex;
        align-items: center;

        p {
          float: right;
          font-size: 0.4rem;
          line-height: 100%;

        }
      }
    }

    .bg {
      width: 100%;
      height: 13rem;
      display: flex;
      flex-wrap: wrap;

      .box {
        margin: 0.3rem 0.2rem;
        width: 30%;
        height: 6rem;

        .box-img {
          width: 100%;
          height: 4.4rem;

          img {
            width: 100%;
            height: 100%;
          }
        }

        p {
          margin-top: 0.1rem;
          font-size: 0.5rem;
          font-family: heiti;
          font-weight: 700;
        }
      }

    }
  }

  .suggest-bangdan {
    width: 100%;
    height: 15rem;
    display: flex;
    margin-top: 1rem;
    flex-direction: column;

    .title {
      width: 100%;
      height: 1rem;

      .tuijian {
        float: left;
        width: 5rem;
        height: 100%;

        p {
          margin-left: 0.4rem;
          font-size: 0.7rem;
          font-weight: 700;
          font-family: heiti;
        }
      }

      .more {
        float: right;
        width: 1.5rem;
        height: 100%;

        display: flex;
        align-items: center;

        p {
          float: right;
          font-size: 0.4rem;
          line-height: 100%;

        }
      }
    }

    .bg {
      width: 100%;
      height: 13rem;
      display: flex;

      .box {
        &:first-child {
          background-color: #c4b3ff;
        }

        &:nth-child(2) {
          background-color: #b3ffc4;
        }

        &:nth-child(3) {
          background-color: #ffd8b2;
        }

        &:nth-child(4) {
          background-color: #fff9b2;
        }

        margin: .3rem 0.2rem;
        width: 24%;
        height: 13.5rem;

        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 0.2rem;

        .music-title {

          p {
            font-size: .7rem;
            font-weight: 800;
            font-family: heiti;
            text-align: center;
          }
        }

        .play-i {
          height: 1.5rem;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          i {
            color: #f16669;
            font-size: 1rem;
          }
        }

        .bangdan {
          width: 100%;
          height: 10.5rem;

          .demo {
            width: 100%;
            height: 1.8rem;


            p {
              font-size: .5rem;
              font-family: heiti;
              font-weight: 700;
              margin-left: 0.2rem;

            }

            .ti {
              margin-left: 0.4rem;
              font-weight: 400;
              font-size: .5rem;
            }
          }

        }
      }

    }
  }

  .suggest-changpian {
    width: 100%;
    height: 9rem;
    margin-top: 1rem;

    .title {
      width: 100%;
      height: 1rem;

      .tuijian {
        float: left;
        width: 5rem;
        height: 100%;

        p {
          margin-left: 0.4rem;
          font-size: 0.7rem;
          font-weight: 700;
          font-family: heiti;
        }
      }

      .more {
        float: right;
        width: 1.5rem;
        height: 100%;

        display: flex;
        align-items: center;

        p {

          float: right;
          font-size: 0.4rem;
          line-height: 100%;

        }
      }
    }

    .bg {

      margin-top: .5rem;
      width: 100%;
      height: 7rem;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .suggest-hot {
    width: 100%;
    height: 4.8rem;
    display: flex;
    margin-top: 1rem;
    flex-direction: column;

    .title {
      width: 100%;
      height: 1rem;

      .tuijian {
        float: left;
        width: 5rem;
        height: 100%;

        p {
          margin-left: 0.4rem;
          font-size: 0.7rem;
          font-weight: 700;
          font-family: heiti;
        }
      }

      .more {
        float: right;
        width: 1.5rem;
        height: 100%;

        display: flex;
        align-items: center;

        p {
          float: right;
          font-size: 0.4rem;
          line-height: 100%;

        }
      }
    }

    .bg {
      margin-top: 0.4rem;
      display: flex;
      justify-content: flex-start;

      .box {
        margin: 0.1rem 0.15rem;
        width: 2.7rem;
        height: 3.4rem;

        span {
          display: block;
          width: 2.7rem;
          height: 2.7rem;

          img {
            width: 100%;
            height: 100%;
          }
        }

        p {
          font-size: 0.6rem;
          font-family: heiti;
          font-weight: 600;
          text-align: center;
        }
      }
    }
  }
}

//故事模块
.story {
  .story-head {
    width: 100%;
    height: 8rem;

    .story-head-img {
      margin: auto;
      width: 14rem;
      height: 7rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

  }

  .story-bd {
    width: 100%;

    .box {
      width: 14rem;
      height: 3rem;
      display: flex;
      margin: 0.4rem auto;

      .box-left {
        width: 30%;
        height: 3rem;
        display: flex;
        align-items: center;

        .story-img {
          width: 4.4rem;
          height: 2.8rem;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .box-right {
        padding-left: 0.4rem;
        width: 70%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .top {
          height: 50%;
          width: 100%;

          p {
            font-weight: 600;
            font-size: .5rem;
          }
        }

        .bottom {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .story-user {
            display: flex;
            align-items: center;
            width: 50%;
            height: 100%;

            span {
              display: block;
              width: 1rem;
              height: 1rem;

              img {
                width: 100%;
                height: 100%;
                vertical-align: top;
              }
            }

            p {
              margin-left: 0.4rem;
              font-size: .3rem;
              color: #363636;

            }
          }

          .story-reader-count {
            display: flex;
            align-items: center;
            width: 50%;
            height: 100%;
            justify-content: center;

            span {
              display: block;
              width: 1.2rem;
              height: 1rem;

              img {
                width: 100%;
                height: 100%;
                vertical-align: top;
              }
            }

            p {
              margin-left: 0.4rem;
              font-size: .3rem;
              color: #363636;
            }
          }
        }

      }
    }
  }
}

.video {
  .box {
    margin: 0.4rem auto;
    width: 15rem;


    display: flex;
    flex-direction: column;

    .box-header {
      width: 100%;
      height: 2rem;
      display: flex;

      .user-img {
        width: 15%;

        display: flex;
        align-items: center;
        justify-content: center;

        .userimg {
          width: 1.4rem;
          height: 1.4rem;
          text-align: center;

          img {
            width: 100%;
            height: 100%;

          }
        }

      }

      .username {
        display: flex;
        align-items: center;

        p {
          line-height: 1rem;
          font-size: 0.7rem;
          font-weight: 600;
          font-family: heiti;
        }
      }
    }

    .box-body {
      width: 100%;
      height: 9rem;

      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        font-size: .5rem;
        font-family: heiti;
        font-weight: 700;
        margin: 0.2rem 0;
      }

      .video {
        position: relative;
        width: 14rem;
        height: 7.8rem;

        img {
          position: absolute;
          width: 100%;
          height: 100%;
        }

        .jindu {
          position: absolute;
          bottom: -0.2rem;
          left: 50%;
          transform: translateX(-50%);
          width: 13.4rem;
          height: 0.4rem;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

    }

    .box-foot {
      width: 100%;
      height: 1.2rem;
      display: flex;
      flex-direction: row;

      align-items: center;

      margin: 0.2rem;

      .video-button {
        width: 40%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .buttonimg {
          width: 4.6rem;
          height: 0.8rem;
          background: url("../images/videobutton.png") no-repeat;
          background-size: contain;
        }
      }

      .video-scale {
        width: 20%;
        height: 100%;
        font-size: 1rem;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .video-right-up {
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .right-up {
          width: 1.8rem;
          height: 0.7rem;
          background: url("../images/comment.png") no-repeat;
          background-size: contain;
        }
      }

      .video-right-comment {
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .right-comment {
          width: 1.8rem;
          height: 0.7rem;
          background: url("../images/up.png") no-repeat;
          background-size: contain;
        }
      }
    }
  }
}

/*下方播放栏*/
.play {
  z-index: 2;
  position: fixed;
  bottom: 0;
  width: 15rem;
  height: 5.8rem;
  background-color: transparent;

  .bofang {
    margin-top: 1.4rem;
    width: 15rem;
    height: 2rem;
    z-index: 3;

    .btu {
      float: left;
      display: block;
      margin-left: 0.8rem;
      width: 2rem;
      height: 2rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .info {

      display: flex;

      overflow: hidden;
      box-sizing: border-box;
      width: 6rem;
      padding-left: 0.6rem;
      height: 2rem;

      p {

      }

      .name {
        width: 60%;
        color: white;
        font-size: 0.75rem;
        margin-top: 1rem;
      }

      .author {
        width: 40%;
        color: white;
        font-size: 0.6rem;
        margin-top: 1.15rem;
      }
    }
  }

  .trangle {
    z-index: -1;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 3.4rem solid transparent;
    border-right: 0px solid greenyellow;
    border-bottom: 0px solid deeppink;
    border-left: 15rem solid rgba(228, 106, 107, .9);
  }

  .player {
    display: flex;
    align-items: center;
    z-index: 3;
    width: 15rem;
    height: 2.4rem;
    background-color: rgba(228, 106, 107, .9);

    .btu1 {
      margin: 0.4rem 0 0.4rem 1rem;
      width: 30%;
      height: 1.1rem;
      display: flex;

      span {
        width: 50%;
        height: 1.1rem;

        .box {
          width: 1rem;
          height: 1rem;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .btu2 {
      width: 20%;
      height: 1.1rem;

      .menu {
        width: 0.9rem;
        height: 0.9rem;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .btu3 {
      position: relative;
      width: 50%;
      height: 1.1rem;

      .bofangtiao {
        position: absolute;
        top: 50%;
        background: url("../images/jindutiao.png") no-repeat;
        background-size: cover;
        width: 6.4rem;
        height: 0.2rem;

      }
    }
  }
}